const path = require('path')
const webpack = require('webpack')
// 导入在内存中自动生存 html 页面的插件
const htmlWebpackPlugin = require('html-webpack-plugin')
// 使用 Node 中模块化机制，向外暴露一个成员对象
module.exports = {
    entry: path.join(__dirname, './src/main.js'), // 入口文件，表示从这个文件开始打包
    output: { // 输出相关的配置
        path: path.join(__dirname, './dist'), // 打包好的文件，输出到哪个目录中
        filename: 'bundle.js' // 设置打包好的文件输出名称
    },
    // 不推荐这种写法，推荐直接写到 package.json 中的 scripts 脚本中
    /* devServer: { // 配置 webpack-dev-server 相关的指令参数
        //  --open --port 3000 --contentBase src --hot
        open: true, // 自动打开浏览器
        port: 3000, // 运行的端口
        contentBase: 'src', // 托管的目录
        hot: true
    }, */
    plugins: [ // 插件节点
        // 创建一个 webpack 的热更新插件，该插件是为了匹配上边的 devServer 写法
        // new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({ // 在内存中生成 html 页面的插件
            template: path.join(__dirname, './src/index.html'), // 指定根据哪个页面模板在内存中生成页面
            filename: 'index.html' // 指定内存中生成的那个页面的名称
        })
    ],
    module: { // 表示，所有 webpack 处理不了的文件类型，都需要在 module 节点中配置 加载解析规则
        rules: [ // 所有第三方的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理 css 文件的 loader 规则， style-loader 在前， css-loader 在后，表示 先通过 css-loader 把样式解析后,再给 style-loader处理，然后再作用到页面中
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 配置处理 less 文件的 loader 规则
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 scss 文件的 loader 规则
            { test: /\.(png|jpg|gif|bmp|jpeg)$/, use: 'url-loader?limit=8000&name=[hash:8]-[name].[ext]' }, // 配置处理 URL 路径的 loader
            // limit 设置图片的大小，单位是 字节， Byte， 如果图片小于给定的值，才会转为 base64, 否则，直接在页面中引用图片路径
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 babel 转换器转换高级 js 语法的 loader 规则，注意：必须添加  exclude 排除下：exclude : /node_modules/ 
            { test: /\.vue$/, use: 'vue-loader' } // 配置处理 vue 文件的 loader 规则
        ]
    }
}